import React, { Component } from 'react'

import { connect } from 'react-redux';

import {Link} from 'react-router-dom'
import Header from '../common/Header'


class Collect extends Component {
    render() {
        return (
            <div className="collect-page">
                {/* header组件 */}
                <Header title="我的收藏" back={<span onClick={() => { this.props.history.go(-1); }}>&lt;</span>}></Header>
                <div className="shoplist">
                    {
                        this.props.collectList.length > 0 ?
                        this.props.collectList.map((item) => {
                            return (
                                <Link key={item.id} className="item" to={{ pathname: '/shop', state: item }}>
                                    <div className="pic">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="text">
                                        <div className="name">{item.name}</div>
                                        <div>月售 {item.buyCount} 笔</div>
                                        <div>距离 {item.distance}km</div>
                                    </div>
                                </Link>
                            )
                        }) :
                            <div className="empty">您还没有收藏的商家!</div>
                    }
                </div>
            </div>
        )
    }
}


export default connect(
    (state) => {//注入数据
        return {
            collectList: state.collectList
        }
    },
    (dispatch) => {//注入方法
        return {

        }
    }
)(Collect)